<template>
  <scroll-view
    class="album"
    scroll-y
    @scrolltolower="handleToLower"
  >
    <swiper
      autoplay
      circular
    >
      <swiper-item
        class="swiperItem"
        v-for="item in banner"
        :key="item.id"
      >
        <view class="image_wrap">
          <image
            :src="item.new_thumb"
            mode="widthFix"
          ></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 专辑列表 -->
    <view class="album_list">
      <navigator
        :url="'/pages/album/index?id='+item.id"
        class="album_item"
        v-for="(item) in album"
        :key="item.id"
      >

        <view class="album_cover">

          <image
            :src="item.cover"
            mode="aspectFill"
          ></image>

        </view>
        <view class="album_info">
          <view class="text_info_title">{{item.name}}</view>
          <view class="text_info_content">{{item.desc}}</view>
          <view class="focus_wrap">
            <view>+关注</view>
          </view>
        </view>

      </navigator>
    </view>
  </scroll-view>
</template>

<script>


export default {

  data () {
    return {
      queryInfo: {
        limit: 30,
        order: 'new',
        skip: 0,

      },
      // 轮播图数据
      banner: [],
      //专辑列表
      album: [],
      // 是否还有数据
      hasMore: true
    }
  },
  mounted () {
    //修改页面的标题
    uni.setNavigationBarTitle({ title: '专辑' })
    // 获取相关数据
    this.getList()
  },
  methods: {
    // 获取相关数据
    getList () {
      this.$request({
        url: '/image/v1/wallpaper/album',
        data: this.queryInfo
      }).then(res => {
        console.log(res);
        this.banner = res.banner
        if (res.album.length !== this.queryInfo.limit) {
          this.hasMore = false
          uni.showToast({
            title: '没有更多数据了',
            icon: 'none'
          });
          return
        }
        this.album = [...this.album, ...res.album]
      })
    },
    // 滚动触底事件
    handleToLower () {
      if (!this.hasMore) {
        return uni.showToast({
          title: '没有更多数据了',
          icon: 'none'
        });
      }
      this.queryInfo.skip += 30
      this.getList()

    }
  }
}
</script>

<style lang="scss" scope>
.album {
  height: calc(100vh - 40px);

  swiper {
    width: 100%;
    height: 214 * 100vw / 342;
    image {
      width: 100%;
    }
  }
  // 专辑列表相关
  .album_list {
    .album_item {
      display: flex;
      align-content: center;
      border-bottom: 1px solid #eeeeee;
      .album_cover {
        flex: 1;
        padding: 20rpx;
        image {
          width: 100%;
          height: 25vw;
        }
      }

      .album_info {
        flex: 2;
        padding: 20rpx;
        .text_info_title {
          font-weight: 700;
          font-size: 35rpx;
        }

        .text_info_content {
          margin: 20rpx 0;
          color: #666;
          // 文字一行内显示
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .focus_wrap {
          display: flex;
          justify-content: flex-end;
          view {
            border: $color solid 1px;
            color: $color;
            padding: 10rpx;
          }
        }
      }
    }
  }
}
</style>